// 烟花效果系统 - 7种以上不同的烟花类型
class FireworksSystem {
    constructor() {
        this.canvas = null;
        this.ctx = null;
        this.fireworks = [];
        this.particles = [];
        this.animationId = null;
        this.isActive = false;
        this.lastFireworkTime = 0;
        this.maxParticles = 800; // 限制最大粒子数量以保证性能
        this.fireworkTypes = this.initializeFireworkTypes();
        this.colors = [
            '#ff1744', '#e91e63', '#9c27b0', '#673ab7',
            '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4',
            '#009688', '#4caf50', '#8bc34a', '#cddc39',
            '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'
        ];
        this.init();
    }

    init() {
        this.createCanvas();
        this.bindEvents();
    }

    createCanvas() {
        this.canvas = document.createElement('canvas');
        this.canvas.id = 'fireworksCanvas';
        this.canvas.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
        document.body.appendChild(this.canvas);
        
        this.ctx = this.canvas.getContext('2d');
        this.resizeCanvas();
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => this.resizeCanvas());
    }

    resizeCanvas() {
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = window.innerWidth * dpr;
        this.canvas.height = window.innerHeight * dpr;
        this.ctx.scale(dpr, dpr);
        this.canvas.style.width = window.innerWidth + 'px';
        this.canvas.style.height = window.innerHeight + 'px';
    }

    bindEvents() {
        // 只在主菜单界面监听点击事件
        document.addEventListener('click', (e) => {
            const mainMenu = document.getElementById('mainMenu');
            if (!mainMenu || !mainMenu.classList.contains('active')) return;
            
            // 检查点击是否在按钮或其他交互元素上
            if (this.isClickOnButton(e.target)) return;
            
            this.createFirework(e.clientX, e.clientY);
        });

        // 监听界面切换，自动停止烟花
        window.addEventListener('screenChanged', () => {
            this.stop();
        });
    }

    isClickOnButton(target) {
        // 检查是否点击了按钮、链接或其他交互元素
        return target.closest('button, a, input, select, textarea, .menu-btn, .lang-btn, .language-option');
    }

    initializeFireworkTypes() {
        return {
            // 1. 经典烟花 - 圆形爆炸
            classic: {
                name: '经典烟花',
                particleCount: 80,
                speed: 8,
                gravity: 0.15,
                life: 120,
                createPattern: (x, y, color) => this.createClassicPattern(x, y, color)
            },

            // 2. 菊花烟花 - 多层环形
            chrysanthemum: {
                name: '菊花烟花',
                particleCount: 120,
                speed: 6,
                gravity: 0.1,
                life: 150,
                createPattern: (x, y, color) => this.createChrysanthemumPattern(x, y, color)
            },

            // 3. 柳树烟花 - 下垂效果
            willow: {
                name: '柳树烟花',
                particleCount: 100,
                speed: 10,
                gravity: 0.25,
                life: 180,
                createPattern: (x, y, color) => this.createWillowPattern(x, y, color)
            },

            // 4. 心形烟花
            heart: {
                name: '心形烟花',
                particleCount: 60,
                speed: 5,
                gravity: 0.12,
                life: 200,
                createPattern: (x, y, color) => this.createHeartPattern(x, y, color)
            },

            // 5. 螺旋烟花
            spiral: {
                name: '螺旋烟花',
                particleCount: 90,
                speed: 7,
                gravity: 0.08,
                life: 160,
                createPattern: (x, y, color) => this.createSpiralPattern(x, y, color)
            },

            // 6. 星形烟花
            star: {
                name: '星形烟花',
                particleCount: 70,
                speed: 9,
                gravity: 0.14,
                life: 140,
                createPattern: (x, y, color) => this.createStarPattern(x, y, color)
            },

            // 7. 环形烟花
            ring: {
                name: '环形烟花',
                particleCount: 80,
                speed: 6,
                gravity: 0.1,
                life: 130,
                createPattern: (x, y, color) => this.createRingPattern(x, y, color)
            },

            // 8. 蝴蝶烟花
            butterfly: {
                name: '蝴蝶烟花',
                particleCount: 85,
                speed: 5,
                gravity: 0.16,
                life: 170,
                createPattern: (x, y, color) => this.createButterflyPattern(x, y, color)
            },

            // 9. 闪烁烟花
            sparkle: {
                name: '闪烁烟花',
                particleCount: 150,
                speed: 4,
                gravity: 0.05,
                life: 100,
                createPattern: (x, y, color) => this.createSparklePattern(x, y, color)
            }
        };
    }

    createFirework(x, y) {
        if (!this.isActive) {
            this.start();
        }

        // 随机选择烟花类型
        const typeNames = Object.keys(this.fireworkTypes);
        const typeName = typeNames[Math.floor(Math.random() * typeNames.length)];
        const type = this.fireworkTypes[typeName];
        
        // 随机选择颜色
        const color = this.colors[Math.floor(Math.random() * this.colors.length)];
        
        // 创建烟花粒子
        const particles = type.createPattern(x, y, color);
        
        // 性能保护：限制粒子数量
        if (this.particles.length + particles.length > this.maxParticles) {
            const removeCount = (this.particles.length + particles.length) - this.maxParticles;
            this.particles.splice(0, removeCount);
        }
        
        this.particles.push(...particles);

        // 显示烟花类型提示
        this.showFireworkNotification(type.name, x, y);

        console.log(`🎆 发射${type.name}烟花! 位置: (${x}, ${y})`);
    }

    showFireworkNotification(fireworkName, x, y) {
        // 创建烟花类型提示
        const notification = document.createElement('div');
        notification.className = 'firework-notification';
        notification.textContent = fireworkName;
        notification.style.cssText = `
            position: fixed;
            left: ${x + 20}px;
            top: ${y - 20}px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            background: rgba(0, 0, 0, 0.7);
            padding: 4px 8px;
            border-radius: 12px;
            pointer-events: none;
            z-index: 1000;
            transform: scale(0);
            transition: all 0.3s ease;
            font-family: var(--font-primary, 'Noto Sans SC', sans-serif);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        `;
        
        document.body.appendChild(notification);
        
        // 动画出现
        requestAnimationFrame(() => {
            notification.style.transform = 'scale(1)';
        });
        
        // 2秒后消失
        setTimeout(() => {
            notification.style.transform = 'scale(0) translateY(-20px)';
            notification.style.opacity = '0';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 2000);
    }

    // 经典圆形烟花
    createClassicPattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.classic.particleCount;
        
        for (let i = 0; i < count; i++) {
            const angle = (i / count) * Math.PI * 2;
            const speed = this.fireworkTypes.classic.speed + Math.random() * 4;
            
            particles.push({
                x: x,
                y: y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                color: color,
                alpha: 1,
                life: this.fireworkTypes.classic.life + Math.random() * 40,
                maxLife: this.fireworkTypes.classic.life + Math.random() * 40,
                size: 2 + Math.random() * 3,
                gravity: this.fireworkTypes.classic.gravity,
                type: 'classic'
            });
        }
        return particles;
    }

    // 菊花烟花 - 多层环形
    createChrysanthemumPattern(x, y, color) {
        const particles = [];
        const rings = 3;
        const particlesPerRing = 40;
        
        for (let ring = 0; ring < rings; ring++) {
            for (let i = 0; i < particlesPerRing; i++) {
                const angle = (i / particlesPerRing) * Math.PI * 2;
                const speed = (ring + 1) * 3 + Math.random() * 2;
                
                particles.push({
                    x: x,
                    y: y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    color: this.colors[Math.floor(Math.random() * this.colors.length)],
                    alpha: 1,
                    life: 150 + ring * 20,
                    maxLife: 150 + ring * 20,
                    size: 2 + ring * 0.5,
                    gravity: 0.1,
                    type: 'chrysanthemum'
                });
            }
        }
        return particles;
    }

    // 柳树烟花 - 下垂效果
    createWillowPattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.willow.particleCount;
        
        for (let i = 0; i < count; i++) {
            const angle = Math.PI + (Math.random() - 0.5) * Math.PI * 0.8; // 主要向下
            const speed = this.fireworkTypes.willow.speed + Math.random() * 6;
            
            particles.push({
                x: x,
                y: y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                color: color,
                alpha: 1,
                life: this.fireworkTypes.willow.life,
                maxLife: this.fireworkTypes.willow.life,
                size: 1.5 + Math.random() * 2,
                gravity: this.fireworkTypes.willow.gravity,
                type: 'willow',
                trail: [] // 添加拖尾效果
            });
        }
        return particles;
    }

    // 心形烟花
    createHeartPattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.heart.particleCount;
        
        for (let i = 0; i < count; i++) {
            const t = (i / count) * Math.PI * 2;
            // 心形参数方程
            const heartX = 16 * Math.pow(Math.sin(t), 3);
            const heartY = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
            
            const scale = 0.3;
            particles.push({
                x: x,
                y: y,
                vx: heartX * scale,
                vy: heartY * scale,
                color: '#ff1744', // 红色心形
                alpha: 1,
                life: this.fireworkTypes.heart.life,
                maxLife: this.fireworkTypes.heart.life,
                size: 2 + Math.random() * 2,
                gravity: this.fireworkTypes.heart.gravity,
                type: 'heart'
            });
        }
        return particles;
    }

    // 螺旋烟花
    createSpiralPattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.spiral.particleCount;
        
        for (let i = 0; i < count; i++) {
            const t = (i / count) * Math.PI * 4; // 两圈螺旋
            const radius = (i / count) * 8;
            
            particles.push({
                x: x,
                y: y,
                vx: Math.cos(t) * radius,
                vy: Math.sin(t) * radius,
                color: color,
                alpha: 1,
                life: this.fireworkTypes.spiral.life,
                maxLife: this.fireworkTypes.spiral.life,
                size: 2 + Math.random() * 2,
                gravity: this.fireworkTypes.spiral.gravity,
                type: 'spiral',
                rotation: t
            });
        }
        return particles;
    }

    // 星形烟花
    createStarPattern(x, y, color) {
        const particles = [];
        const points = 5;
        const particlesPerPoint = 14;
        
        for (let point = 0; point < points; point++) {
            for (let i = 0; i < particlesPerPoint; i++) {
                const angle = (point / points) * Math.PI * 2;
                const speed = 3 + i * 0.8;
                
                particles.push({
                    x: x,
                    y: y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    color: color,
                    alpha: 1,
                    life: this.fireworkTypes.star.life,
                    maxLife: this.fireworkTypes.star.life,
                    size: 2 + Math.random() * 2,
                    gravity: this.fireworkTypes.star.gravity,
                    type: 'star'
                });
            }
        }
        return particles;
    }

    // 环形烟花
    createRingPattern(x, y, color) {
        const particles = [];
        const rings = 2;
        const particlesPerRing = 40;
        
        for (let ring = 0; ring < rings; ring++) {
            for (let i = 0; i < particlesPerRing; i++) {
                const angle = (i / particlesPerRing) * Math.PI * 2;
                const speed = 4 + ring * 2;
                
                particles.push({
                    x: x,
                    y: y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    color: ring === 0 ? color : this.colors[Math.floor(Math.random() * this.colors.length)],
                    alpha: 1,
                    life: 130 - ring * 20,
                    maxLife: 130 - ring * 20,
                    size: 3 - ring * 0.5,
                    gravity: 0.1,
                    type: 'ring'
                });
            }
        }
        return particles;
    }

    // 蝴蝶烟花
    createButterflyPattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.butterfly.particleCount;
        
        for (let i = 0; i < count; i++) {
            const t = (i / count) * Math.PI * 2;
            // 蝴蝶参数方程
            const r = Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) + Math.pow(Math.sin(t / 12), 5);
            const butterflyX = r * Math.cos(t);
            const butterflyY = r * Math.sin(t);
            
            const scale = 2;
            particles.push({
                x: x,
                y: y,
                vx: butterflyX * scale,
                vy: butterflyY * scale,
                color: color,
                alpha: 1,
                life: this.fireworkTypes.butterfly.life,
                maxLife: this.fireworkTypes.butterfly.life,
                size: 1.5 + Math.random() * 2,
                gravity: this.fireworkTypes.butterfly.gravity,
                type: 'butterfly'
            });
        }
        return particles;
    }

    // 闪烁烟花
    createSparklePattern(x, y, color) {
        const particles = [];
        const count = this.fireworkTypes.sparkle.particleCount;
        
        for (let i = 0; i < count; i++) {
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 4;
            
            particles.push({
                x: x,
                y: y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                color: this.colors[Math.floor(Math.random() * this.colors.length)],
                alpha: 1,
                life: this.fireworkTypes.sparkle.life,
                maxLife: this.fireworkTypes.sparkle.life,
                size: 1 + Math.random() * 2,
                gravity: this.fireworkTypes.sparkle.gravity,
                type: 'sparkle',
                sparkle: Math.random() * Math.PI * 2 // 闪烁相位
            });
        }
        return particles;
    }

    start() {
        if (this.isActive) return;
        
        this.isActive = true;
        this.canvas.style.opacity = '1';
        this.animate();
        
        // 显示使用说明
        this.showUsageHint();
        
        console.log('🎆 烟花系统启动');
    }

    showUsageHint() {
        // 检查是否已经显示过提示
        const hasShownHint = localStorage.getItem('fireworks_hint_shown');
        if (hasShownHint) return;
        
        const hint = document.createElement('div');
        hint.id = 'fireworksHint';
        hint.innerHTML = `
            <div class="hint-content">
                <div class="hint-title">🎆 烟花模式已启动</div>
                <div class="hint-text">
                    • 左键点击空白处：放随机烟花<br>
                    • 点击“烟花”按钮：选择烟花类型<br>
                    • 共有9种不同的烟花效果
                </div>
                <button class="hint-close">知道了</button>
            </div>
        `;
        
        hint.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(26, 31, 46, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 20px;
            max-width: 300px;
            text-align: center;
            z-index: 10001;
            backdrop-filter: blur(20px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
            transition: all 0.3s ease;
            font-family: var(--font-primary, 'Noto Sans SC', sans-serif);
        `;
        
        const style = document.createElement('style');
        style.textContent = `
            .hint-content {
                color: #fff;
            }
            .hint-title {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 12px;
                color: var(--primary-color, #00d4ff);
            }
            .hint-text {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 16px;
                text-align: left;
            }
            .hint-close {
                background: linear-gradient(135deg, var(--primary-color, #00d4ff), var(--accent-color, #4ecdc4));
                border: none;
                color: #fff;
                padding: 8px 16px;
                border-radius: 8px;
                cursor: pointer;
                font-weight: 500;
                transition: transform 0.2s ease;
            }
            .hint-close:hover {
                transform: translateY(-1px);
            }
        `;
        document.head.appendChild(style);
        
        document.body.appendChild(hint);
        
        // 动画显示
        requestAnimationFrame(() => {
            hint.style.opacity = '1';
            hint.style.transform = 'translate(-50%, -50%) scale(1)';
        });
        
        // 绑定关闭事件
        hint.querySelector('.hint-close').addEventListener('click', () => {
            hint.style.opacity = '0';
            hint.style.transform = 'translate(-50%, -50%) scale(0.8)';
            setTimeout(() => {
                if (hint.parentNode) {
                    hint.parentNode.removeChild(hint);
                }
            }, 300);
            localStorage.setItem('fireworks_hint_shown', 'true');
        });
        
        // 10秒后自动关闭
        setTimeout(() => {
            const hintElement = document.getElementById('fireworksHint');
            if (hintElement) {
                hintElement.querySelector('.hint-close').click();
            }
        }, 10000);
    }

    stop() {
        if (!this.isActive) return;
        
        this.isActive = false;
        this.canvas.style.opacity = '0';
        
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
            this.animationId = null;
        }
        
        // 清空粒子数组
        setTimeout(() => {
            this.particles = [];
            this.fireworks = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }, 300);
        
        console.log('🎆 烟花系统停止');
    }

    animate() {
        if (!this.isActive) return;
        
        // 使用更温和的背景清除以保持拖尾效果，同时确保粒子可见
        this.ctx.fillStyle = 'rgba(10, 14, 26, 0.02)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.updateParticles();
        this.drawParticles();
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }

    updateParticles() {
        for (let i = this.particles.length - 1; i >= 0; i--) {
            const particle = this.particles[i];
            
            // 更新位置
            particle.x += particle.vx;
            particle.y += particle.vy;
            particle.vy += particle.gravity;
            
            // 空气阻力
            particle.vx *= 0.99;
            particle.vy *= 0.99;
            
            // 更新生命值
            particle.life--;
            particle.alpha = particle.life / particle.maxLife;
            
            // 特殊效果更新
            if (particle.type === 'willow' && particle.trail) {
                particle.trail.push({ x: particle.x, y: particle.y, alpha: particle.alpha });
                if (particle.trail.length > 10) {
                    particle.trail.shift();
                }
            }
            
            if (particle.type === 'sparkle') {
                particle.sparkle += 0.3;
                particle.alpha = Math.abs(Math.sin(particle.sparkle)) * (particle.life / particle.maxLife);
            }
            
            // 移除死亡粒子
            if (particle.life <= 0) {
                this.particles.splice(i, 1);
            }
        }
        
        // 如果没有粒子了，停止动画
        if (this.particles.length === 0 && this.isActive) {
            setTimeout(() => {
                if (this.particles.length === 0) {
                    this.stop();
                }
            }, 1000);
        }
    }

    drawParticles() {
        for (const particle of this.particles) {
            this.ctx.save();
            
            // 设置透明度和颜色
            this.ctx.globalAlpha = particle.alpha;
            this.ctx.fillStyle = particle.color;
            
            // 绘制拖尾效果（柳树烟花）
            if (particle.type === 'willow' && particle.trail) {
                this.ctx.strokeStyle = particle.color;
                this.ctx.lineWidth = particle.size;
                this.ctx.beginPath();
                
                for (let i = 0; i < particle.trail.length; i++) {
                    const point = particle.trail[i];
                    this.ctx.globalAlpha = point.alpha * (i / particle.trail.length);
                    
                    if (i === 0) {
                        this.ctx.moveTo(point.x, point.y);
                    } else {
                        this.ctx.lineTo(point.x, point.y);
                    }
                }
                this.ctx.stroke();
            }
            
            // 绘制粒子主体
            this.ctx.globalAlpha = particle.alpha;
            this.ctx.beginPath();
            this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            this.ctx.fill();
            
            // 添加发光效果
            if (particle.type === 'sparkle' || particle.type === 'star') {
                this.ctx.shadowBlur = 10;
                this.ctx.shadowColor = particle.color;
                this.ctx.fill();
                this.ctx.shadowBlur = 0;
            }
            
            this.ctx.restore();
        }
    }

    showFireworkSelector(x, y) {
        // 移除已存在的选择器
        this.hideFireworkSelector();
        
        const selector = document.createElement('div');
        selector.id = 'fireworkSelector';
        selector.className = 'firework-selector';
        
        // 计算按钮位置，在按钮下方显示
        const fireworksBtn = document.getElementById('fireworksBtn');
        const rect = fireworksBtn.getBoundingClientRect();
        
        selector.style.cssText = `
            position: fixed;
            left: ${rect.left}px;
            top: ${rect.bottom + 10}px;
            background: rgba(26, 31, 46, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 8px;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            z-index: 10000;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.2s ease;
            font-family: var(--font-primary, 'Noto Sans SC', sans-serif);
        `;
        
        // 添加标题
        const title = document.createElement('div');
        title.textContent = '选择烟花类型';
        title.style.cssText = `
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 4px;
        `;
        selector.appendChild(title);
        
        // 添加随机选项
        const randomOption = document.createElement('div');
        randomOption.className = 'firework-option';
        randomOption.innerHTML = `
            <span class="firework-icon">🎆</span>
            <span class="firework-name">随机烟花</span>
        `;
        randomOption.style.cssText = this.getOptionStyle();
        randomOption.addEventListener('click', () => {
            // 在屏幕中央随机位置放烟花
            const centerX = window.innerWidth / 2 + (Math.random() - 0.5) * 200;
            const centerY = window.innerHeight / 2 + (Math.random() - 0.5) * 200;
            this.createFirework(centerX, centerY);
            this.hideFireworkSelector();
        });
        selector.appendChild(randomOption);
        
        // 添加分隔线
        const divider = document.createElement('div');
        divider.style.cssText = `
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 4px 0;
        `;
        selector.appendChild(divider);
        
        // 添加各种烟花类型
        const typeIcons = {
            'classic': '✨',
            'chrysanthemum': '🌸',
            'willow': '🌳',
            'heart': '❤️',
            'spiral': '🌀',
            'star': '⭐',
            'ring': '⚪',
            'butterfly': '🦋',
            'sparkle': '❇️'
        };
        
        Object.entries(this.fireworkTypes).forEach(([key, type]) => {
            const option = document.createElement('div');
            option.className = 'firework-option';
            option.innerHTML = `
                <span class="firework-icon">${typeIcons[key] || '🎆'}</span>
                <span class="firework-name">${type.name}</span>
            `;
            option.style.cssText = this.getOptionStyle();
            
            option.addEventListener('click', () => {
                // 在屏幕中央随机位置放烟花
                const centerX = window.innerWidth / 2 + (Math.random() - 0.5) * 200;
                const centerY = window.innerHeight / 2 + (Math.random() - 0.5) * 200;
                this.createSpecificFirework(centerX, centerY, key);
                this.hideFireworkSelector();
            });
            
            selector.appendChild(option);
        });
        
        document.body.appendChild(selector);
        
        // 动画出现
        requestAnimationFrame(() => {
            selector.style.opacity = '1';
            selector.style.transform = 'scale(1)';
        });
        
        // 点击其他地方关闭
        setTimeout(() => {
            document.addEventListener('click', this.hideFireworkSelector.bind(this), { once: true });
        }, 100);
    }

    getOptionStyle() {
        return `
            display: flex;
            align-items: center;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s ease;
            color: #fff;
            font-size: 13px;
        `;
    }

    hideFireworkSelector() {
        const selector = document.getElementById('fireworkSelector');
        if (selector) {
            selector.style.opacity = '0';
            selector.style.transform = 'scale(0.8)';
            setTimeout(() => {
                if (selector.parentNode) {
                    selector.parentNode.removeChild(selector);
                }
            }, 200);
        }
    }

    createSpecificFirework(x, y, typeName) {
        if (!this.isActive) {
            this.start();
        }

        const type = this.fireworkTypes[typeName];
        if (!type) return;
        
        // 随机选择颜色
        const color = this.colors[Math.floor(Math.random() * this.colors.length)];
        
        // 创建烟花粒子
        const particles = type.createPattern(x, y, color);
        
        // 性能保护：限制粒子数量
        if (this.particles.length + particles.length > this.maxParticles) {
            const removeCount = (this.particles.length + particles.length) - this.maxParticles;
            this.particles.splice(0, removeCount);
        }
        
        this.particles.push(...particles);

        // 显示烟花类型提示
        this.showFireworkNotification(type.name, x, y);

        console.log(`🎆 手动发射${type.name}烟花! 位置: (${x}, ${y})`);
    }

    // 销毁系统
    destroy() {
        this.stop();
        if (this.canvas && this.canvas.parentNode) {
            this.canvas.parentNode.removeChild(this.canvas);
        }
        window.removeEventListener('resize', this.resizeCanvas);
    }
}

// 创建全局烟花系统实例
window.fireworksSystem = new FireworksSystem();

// 导出供其他模块使用
if (typeof module !== 'undefined' && module.exports) {
    module.exports = FireworksSystem;
}

console.log('🎆 烟花系统加载完成 - 支持9种烟花效果');